<template>
  <div>
    <el-container>
      <el-aside width="280px">
        <div id="quyu">
          <span class="xiaozi cuda">A区001号:</span><br />
          <span class="xiaozi">2019/11/18 11:18:20 1001</span>
          <i class="el-icon-arrow-right" id="tubiao"></i><br />
          <span class="xiaozi">订单号：145454421544UP1544</span>
        </div>
      </el-aside>
      <el-container>
        <el-header
          ><span class="youge"> 用户名称：null</span
          ><span class="gekai">人数：3人</span
          ><span class="gekai">服务员：1001</span
          ><span class="gekai">下单时长：25分钟</span>
          <el-button type="primary">刷新</el-button>
        </el-header>
        <el-main>
          <el-table
            height="500px"
            :data="tableData"
            style="width: 100%"
            :border="true"
          >
            <el-table-column prop="dishes" label="菜品名称" width="">
            </el-table-column>
            <el-table-column prop="danjia" label="单价" width="">
            </el-table-column>
            <el-table-column prop="num" label="数量" width="">
            </el-table-column>
            <el-table-column prop="kouwei" label="规格/口味" width="">
            </el-table-column>
            <el-table-column prop="xiaoji" label="小计" width="">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="">
              <template>
                <el-button type="text" size="small">退菜</el-button>
                <el-button type="text" size="small">赠送</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer>
          <div class="clear" style="line-height: 50px">
            <el-button
              type="primary"
              style="
                width: 150px;
                height: 50px;
                float: right;
                margin-right: 71px;
                padding: 0;
              "
              >结账</el-button
            >
            <div style="float: right; margin-right: 20px">
              <span>合计：<span class="bianhong">8份</span></span>
              <span>金额：<span class="bianhong">￥100.00</span></span>
            </div>
          </div>
          <div style="margin-top: 20px">
            <el-button class="sianniu" @click="jiacai">加菜 </el-button>
            <el-button class="sianniu" @click="dialogVisible = true"
              >换桌号</el-button
            >
            <el-button class="sianniu">删除订单</el-button>
            <el-button class="sianniu">出菜</el-button>
          </div>
        </el-footer>
      </el-container>
    </el-container>
    <el-dialog title="换桌号" :visible.sync="dialogVisible" width="30%">
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in quyu"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      quyu: [
        { label: "A区:1号" },
        { label: "A区:2号" },
        { label: "A区:3号" },
        { label: "A区:4号" },
        { label: "B区:1号" },
        { label: "B区:2号" },
        { label: "B区:3号" },
        { label: "B区:4号" },
      ],
      tableData: [
        { dishes: "肉丝", danjia: 8, num: 2, kouwei: "重辣", xiaoji: 10 },
        {
          dishes: "番茄炒蛋",
          danjia: 10,
          num: 3,
          kouwei: "大份甜酸",
          xiaoji: 10,
        },
        { dishes: "鱼香肉丝", danjia: 19, num: 2, kouwei: "酸辣", xiaoji: 38 },
        { dishes: "鱼香肉丝", danjia: 19, num: 2, kouwei: "酸辣", xiaoji: 38 },
      ],

      dialogVisible: false,
    };
  },
  methods: {
    jiacai() {
      this.$router.push({ path: "/employee/order" });
    },
  },
};
</script>
<style lang="less" scope>
.xiaozi {
  font-size: 13px;
}
.cuda {
  font-weight: 700;
}
#cebian div:nth-child(2) {
  padding-bottom: 3px;
  height: 80px;
}
#tubiao {
  margin-left: 60px;
  font-size: 30px;
  font-weight: 700;
}

#quyu {
  border-bottom: 1px solid rgb(223, 222, 222);
}
.el-header {
  border: 1px solid rgb(230, 229, 229);
  line-height: 58px;
  line-height: 60px;
  margin-left: 20px;
  border-right: none;
}
.gekai {
  margin: 110px;
}

.youge {
  margin: 0 125px 0 30px;
}
.clear {
  clear: both;
  content: "";
  display: block;
}
.bianhong {
  color: red;
}
.el-footer div span:nth-child(2) {
  margin-left: 20px;
}

.el-aside {
  border: 1px solid rgb(223, 222, 222);
  margin-top: -1px;
}
.sianniu {
  width: 280px;
  height: 100px;
  font-weight: 700;
}
</style>
